<!-- 报表检索条件组件 -->

<template>
    <div class="tableSearch">
        <el-form :inline="true" :model="searchForm" class="report-form" ref="formRef" :label-width="labelWidth">
            <el-form-item v-for="item in searchFormDatas" :key="item.id" :label="item.label" :prop="item.prop"
                :rules="item.rules">
                <component :is="formComponentMap[item.type]" :data="item" v-model:searchForm="searchForm"
                    :treeDatas="treeDatas"></component>
            </el-form-item>
            <el-form-item v-show="isBtnShow">
                <div class="btnBox">
                    <span class="searchBtn" :class="{'forbidBtn': loading}" @click="submitForm(formRef)">查询</span>
                    <span class="resetBtn" @click="handleReset">重置</span>
                    <slot></slot>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { ref } from 'vue';

import * as local from '@/utils/cache/localStorage';

import Input from '@/components/elements/Input.vue';
import Select from '@/components/elements/Select.vue';
import InputArea from '@/components/elements/InputArea.vue';
import SelectMultiple from '@/components/elements/SelectMultiple.vue';
import SelectTree from '@/components/elements/SelectTree.vue';
import DateRangePicker from '@/components/elements/DateRangePicker.vue';
import SelectModel from '@/components/elements/SelectModel.vue';
import SelectNumber from '@/components/elements/SelectNumber.vue';
import DateMonthPicker from '@/components/elements/DateMonthPicker.vue';
import DateTimeRangePicker from '@/components/elements/DateTimeRangePicker.vue';

const props = defineProps({
    loading: {
        type: Boolean,
        default: false
    },  
    labelWidth: {
        type: String,
        default: '70px'
    },
    searchFormDatas: {
        type: Array,
        default: () => []
    },
    isBtnShow: {
        type: Boolean,
        default: true
    }
});

const emit = defineEmits(['handleSearchForm', 'handleResetForm']);

const searchForm = defineModel('searchForm');

const treeDatas = ref(local.getItem('orgTreeDatas'));

const formRef = ref(null);

defineExpose({formRef});

// 表单组件映射
const formComponentMap = {
    'input': Input,
    'inputArea': InputArea,
    'select': Select,
    'selectMulti': SelectMultiple,
    'selectTree': SelectTree,
    'selectModel': SelectModel,
    'selectNumber': SelectNumber,
    'dateMonthPicker': DateMonthPicker,
    'dateRangePicker': DateRangePicker,
    'dateTimeRangePicker': DateTimeRangePicker
};

// 查询
const submitForm = (formEl) => {
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            emit('handleSearchForm', 'search');
        } else {
            return false
        }
    })
};

// 重置
const handleReset = () => {
    emit('handleResetForm');
};

</script>

<style lang="scss" scoped>@import "./index.scss";</style>